<template>
  <div>
  <!--默认字号为12px, isActive控制font20类是否加入class中-->
  <div v-bind:class="{font12: true, font20:state.isActive == '1'}" @click="change('1')">我是尼克陈</div>
  <div v-bind:class="{font12: true, font20:state.isActive == '2'}" @click="change('2')">我是十三</div>
  </div>
</template>
<script>
import {reactive} from 'vue'
export default{
  setup(){
    const state = reactive({
      isActive:'1' //默认为1
    })
    //单击当前选项，将当前变量值传入，赋值给isActive
    const change = (active) =>{
      state.isActive = active
    }
    return {state, change}
  }
}
</script>
<!--提前设置号font12和font20的样式属性-->
<style scoped>
  .font12{
    font-size: 12px;
  }
  .font20{
    font-size: 20px;
  }
</style>